import { CSSProperties } from 'react';
import { Tooltip } from '../../functionalComponent';
import { iup } from '../../util';

export default function renderLabel(props) {
  const { width, label: originLabel, langKey, labelAlign } = props;
  const label = iup.getPageLang()[langKey] ?? originLabel;
  const labelStyle: CSSProperties = {
    width: width,
    display: '-webkit-box',
    textAlign: labelAlign || 'right',
    wordBreak: 'break-all',
    whiteSpace: 'normal',
    maxHeight: '35px',
    lineHeight: 1.25,
    overflow: 'hidden',
    WebkitLineClamp: 2,
    textOverflow: 'ellipsis',
    WebkitBoxOrient: 'vertical'
  };

  return (
    <Tooltip title={label} overflow placement={`top${labelAlign === 'left' ? 'Left' : 'Right'}`}>
      <span style={labelStyle}>{label}</span>
    </Tooltip>
  );
}
